<template>
    <div class="login_container">

        <div class="login_box">
            <el-row :gutter="24">
                <el-col :span="8" style="height: 1px;">

                </el-col>
                <el-col :span="8" style="padding-top: 120px;">
                    <div>

                    </div>
                    <!-- 登录表单区域 -->
                    <el-form :rules="rules" ref="tabUser" :model="tabUser" style="background-color: #fff;padding: 20px 60px 20px 60px;border-radius: 25px;opacity: 0.95;">
                        <div style="text-align: center;">
                            <img src="@/assets/03.png" style="
                                    width: 33px;
                                    height: 33px;
                                    margin: 0 0 -5px 0;
                                    -webkit-user-drag: none;
                                    -khtml-user-drag: none;
                                    -moz-user-drag: none;
                                    user-drag: none;
                                " />
                            <span style="font-size: 28px; font-weight: 600;">
    
                                在线网课学习系统
                            </span>
                        </div>
                        <br>
                        <!-- 用户名 -->
                        <br>
                        <el-form-item>
                            <el-input placeholder="账号" prefix-icon="iconfont icon-r-user2"
                                v-model="tabUser.account"></el-input>
                        </el-form-item>
                        <!-- 密码 -->
                        <el-form-item>
                            <el-input placeholder="密码" show-password prefix-icon="iconfont icon-r-lock"
                                v-model="tabUser.password"></el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                        <div style="display: flex">
                        <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="medium" style="flex: 1" v-model="tabUser.code"></el-input>
                        <div style="flex: 1; height: 36px">
            <!--是一个自定义组件ValidCode的使用方式，并且添加了一个事件监听器。这里的@update:value是监听了ValidCode组件中的value属性更新事件，并将更新后的值传递给名为getCode的方法。
            当ValidCode组件中的value属性更新时，会触发getCode方法。getCode方法可在父组件中定义，用于处理接收到的验证码信息或进行相关操作。-->
                            <valid-code @update:value="getCode" />
                        </div>
                        </div>
                    </el-form-item>

                        <br>
                        <el-button type="primary" @click="login(tabUser)">
                            登录
                        </el-button>
                        <el-button type="success" @click="dialog = true">
                            注册
                        </el-button>
                    </el-form>

                </el-col>
                <el-col :span="8">
                </el-col>
            </el-row>

        </div>


        <el-drawer title="注册账号" :visible.sync="dialog" ref="drawer">
            <el-form :model="form" :rules="rules" style="padding: 0 20px 0 20px;" ref="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="form.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item :show-password="true" label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input :placeholder="form.password" v-model="form.password" type="password"></el-input>
                </el-form-item>
                <el-form-item :show-password="true" label="确认密码" :label-width="formLabelWidth" prop="confirmPassword">
                    <el-input :placeholder="form.confirmPassword" type="password"
                        v-model="form.confirmPassword"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="code" label="验证码" :label-width="formLabelWidth">
                        <div style="display: flex">
                        <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="medium" style="flex: 1" v-model="form.code"></el-input>
                        <div style="flex: 1; height: 36px">
            <!--是一个自定义组件ValidCode的使用方式，并且添加了一个事件监听器。这里的@update:value是监听了ValidCode组件中的value属性更新事件，并将更新后的值传递给名为getCode的方法。
            当ValidCode组件中的value属性更新时，会触发getCode方法。getCode方法可在父组件中定义，用于处理接收到的验证码信息或进行相关操作。-->
                            <valid-code @update:value="getCode" />
                        </div>
                        </div>
                    </el-form-item>
            </el-form>
            <div style="width: 100%; text-align: center">
                <el-button type="success" @click="confirm(form)"> 注册新账号</el-button>
            </div>
        </el-drawer>



    </div>
</template>
<script>

import { loginRequest, register } from "../../api/login";
import Cookies from 'js-cookie'
import ValidCode from "@/components/ValidCode";
import CollectionStudentPracticeVue from '../studentweb/collectioninfo/CollectionStudentPractice.vue';
export default {
    name: "Login",
    components: {
        ValidCode
    },
    data() {
        // 验证码校验
        var validateCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'))
            } else if (value.toLowerCase() !== this.code) {
                callback(new Error('验证码错误'))
            } else {
                callback()
            }
        }

        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            tabUser: {
                account: '',
                password: '',
                code: '',
                // VerificationCode: '',
                // checkbox: false,
            },
            form: {
                userName: '',
                account: '',
                sex: '',
                phone: '',
                password: '',
                confirmPassword: [],
                desc: '',
                code: ''
            },
            code: '',  // 验证码组件传递过来的code
            formLabelWidth: '80px',
            timer: null,
            dialog: false,
            loading: false,



            rules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                confirmPassword: [
                    { required: true, validator: validatePass2, trigger: 'blur' }
                ],
                code: [
                    { required: true, validator: validateCode, trigger: 'blur' }
                ]
            }
        }

    },
    created() {

    },
    methods: {
        getCode(code) {
            this.code = code.toLowerCase()
        },

        confirm(form) {

            if (this.form.userName.trim() == '') {
                this.$message({
                    message: '姓名不能为空',
                    type: 'error'
                });
                return
            }
            if (this.form.account.trim() == '') {
                this.$message({
                    message: '账号不能为空',
                    type: 'error'
                });
                return
            }
            if (this.form.sex.trim() == '') {
                this.$message({
                    message: '请选择性别',
                    type: 'error'
                });
                return
            }
            if (this.form.phone.trim() == '') {
                this.$message({
                    message: '电话不能为空',
                    type: 'error'
                });
                return
            }
            if (this.form.password.trim() == '') {
                this.$message({
                    message: '密码不能为空',
                    type: 'error'
                });
                return
            }
            if (this.form.password !== this.form.confirmPassword) {
                this.$message({
                    message: '两次输入密码不一致',
                    type: 'error'
                });
                return
            }
            //如果账号长度不为11位
            if (this.form.account.length != 11) {
                this.$message({
                    message: '账号长度应为11位',
                    type: 'error'
                });
                return
            }
            //如果电话长度不为11位
            if (this.form.phone.length != 11) {
                this.$message({
                    message: '电话长度应为11位',
                    type: 'error'
                });
                return
            }
            //验证码校验
            if (this.form.code === '') {
                this.$message({
                    message: '请输入验证码',
                    type: 'error'
                });
                return
            }
            this.$refs.form.validate((valid) => {
                if (valid == false) {
                    console.log('error submit!!');
                    return
                }else{
                    register(form).then(resp => {
                        if (resp.data.code == 200) {
                            this.dialog = false;
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('注册失败，账号已存在');
                        }
                    })
                }
            })
            
        },
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },


        sendCode() {

        },
        login(tabUser) {
            //验证码校验
            if (this.tabUser.code === '') {
                this.$message({
                    message: '请输入验证码',
                    type: 'error'
                });
                return
            }
            //表单校验
            this.$refs.tabUser.validate((valid) => {
                if (valid == false) {
                    console.log('error submit!!');
                    return
                }else{
                    loginRequest(tabUser).then(resp => {
                Cookies.set('roleId', resp.data.resultData.roleId)
                Cookies.set('userId', resp.data.resultData.userId)
                Cookies.set('classId', resp.data.resultData.classId)

                if (resp.data.code == 200) {
                    if (resp.data.resultData.roleId == 1) {
                        this.$router.push("/adminHome")
                    }
                    if (resp.data.resultData.roleId == 2) {
                        this.$router.push("/teacherHome")
                    }
                    if (resp.data.resultData.roleId == 3) {
                        this.$router.push("/studentweb")
                    }
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('账号或者密码错误');
                }
            })
                }
            })
            

        },

    }
}
</script>
<style scoped>
.onfont[data-v-2529d779] {
    /* display: flex; */
    /* justify-content: center; */
    position: absolute;
    left: 50%;
    top: 120px;
}

.lr {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.login_container {
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    height: 100%;
    background: url("../../assets/login-bg1.jpg") center top / cover no-repeat;
    z-index: 100;

}


.login_box {
    text-align: center;
    padding-top: 70px;


}

.lf {
    padding: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.el-button {
    width: 48%;
}

.code {
    width: 45%;
}

.code1 {
    /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
    display: line-inline;
    width: 45%;
    height: 28px;
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 3px;
}

.rememberMe {
    color: #fff;
}
</style>
